<template>
  <div class="claims-content">
    <p class="content-desc">默认展示近60天的理赔信息</p>
    <div class="content-list">
      <div class="claimTitle">
        <ul class="f14">
          <li class="w23">订单编号</li>
          <li class="w17">产品名称</li>
          <li class="w16">下单时间</li>
          <li class="w16">保期</li>
          <li class="w16">价格</li>
          <li class="w12">订单状态</li>
        </ul>
      </div>
      <div class="claimTitle2" v-for="item in myOrder">
        <ul class="f14">
          <li class="w23">{{ item._id }}</li>
          <li class="w17">{{ item.orderName }}</li>
          <li class="w16">{{ item.ordertime }}</li>
          <li class="w16" v-if="item.ontime == 60 * 60 * 24">24小时</li>
          <li class="w16" v-else-if="item.ontime == 60 * 60 * 24 * 7">7天</li>
          <li class="w16" v-else-if="item.ontime == 60 * 60 * 24 * 30">30天</li>
          <li class="w16" v-else-if="item.ontime == 60 * 60 * 24 * 365">1年</li>
          <li class="w16">{{ item.price }} 元</li>
          <li class="w12" v-if="item.useful == 0">
            <el-button
              :plain="true"
              @click="openOutSide(item)"
              type="danger"
              plain
              size="mini"
              >申请理赔</el-button
            >
          </li>
          <li
            class="w12"
            v-else-if="item.useful == 1"
            style="color: rgb(103, 194, 58)"
          >
            理赔成功！
          </li>
          <li
            class="w12"
            v-else-if="item.useful == 2"
            style="color: rgb(245, 108, 108)"
          >
            理赔中...
          </li>
          <li
            class="w12"
            v-else-if="item.useful == 4"
            style="color: rgb(144, 147, 153)"
          >
            理赔失败
          </li>
        </ul>
      </div>
    </div>
    <!-- 理赔页 -->
    <el-dialog title="请确认" width="30%" :visible.sync="outerVisible">
      <el-dialog
        width="40%"
        title="理赔申请"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form>
          <el-form-item label="申请人" label-width="120px">
            <span>{{ myMessage[0].username }}</span>
          </el-form-item>
          <el-form-item label="申请理由" label-width="120px">
            <el-input type="textarea" v-model="reason"></el-input>
          </el-form-item>
          <el-form-item label="凭证上传" label-width="120px">
            <el-upload
              action="http://localhost:3000/images/upload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-success="success"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取消</el-button>
          <el-button type="primary" @click="upmit" :plain="true"
            >提交</el-button
          >
        </div>
      </el-dialog>
      <el-link type="danger" disabled style="font-size: 18px"
        >请先与您的专属销售员联系哦！</el-link
      >
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">马上联系销售员</el-button>
        <el-button type="primary" @click="openInside"
          >已联系，开始申请</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "homePage"
);
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      reason: "",
      dialogImageUrl: "",
      dialogVisible: false,
      img: [],
      item: {},
    };
  },
  created() {
    this.getMyOrder(localStorage._id);
  },
  computed: {
    ...mapState(["myOrder", "myMessage"]),
  },
  methods: {
    ...mapActions(["getMyOrder", "createCompensation"]),
    openOutSide(item) {
      this.outerVisible = true;
      this.item = item;
    },
    openInside() {
      this.innerVisible = true;
      this.outerVisible = false;
    },
    //提交理赔
    async upmit() {
      this.innerVisible = false;
      const data = await this.createCompensation({
        applyPerson: this.myMessage[0].username,
        applyOrderId: this.item._id,
        applyProductName: this.item.orderName,
        buyTime: this.item.ordertime,
        stopTime: this.item.ontime,
        applyPrice: this.item.price,
        img: this.img,
        salesmanId: this.myMessage[0].salesmanId._id,
        reason: this.reason,
      });
      if (data.status) {
        this.$message({
          message: "恭喜你，理赔信息提交成功！",
          type: "success",
        });
        this.getMyOrder(localStorage._id);
      } else {
        this.$message.error("对不起，理赔信息提交失败！");
      }
    },
    //上传
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传成功
    success(file) {
      if (file.status === 1) {
        this.img.push(file.filename[0]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.claims-content {
  border: 1px solid #edf4f9;
  min-height: 342px;
  .content-desc {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #005bac;
    background: rgba(0, 91, 172, 0.05);
    text-align: center;
    margin: 0;
  }
  .content-list {
    .claimTitle,
    .claimTitle2 {
      height: 50px;
      line-height: 50px;
      background: #f5f5f5;
      padding: 0 30px 0 0;
      background-color: rgba(0, 91, 172, 0.05);
      .f14 {
        font-size: 14px;
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0;
        li {
          text-align: center;
        }
        .w23 {
          width: 23%;
        }
        .w17 {
          width: 17%;
        }
        .w16 {
          width: 16%;
        }
        .w12 {
          width: 12%;
        }
      }
    }
    .claimTitle2 {
      height: 50px;
      line-height: 50px;
      padding: 0 30px 0 0;
      margin-top: 10px;
      background: none;
      border-bottom: 0.5px dashed #9e9e9e;
    }
  }
}
</style>